﻿
@{
    ViewData["Title"] = "ClientShow";
    Layout = "~/Views/Shared/Template.cshtml";
}

<h3>
    <span style="color:dodgerblue"></span>
    客户管理
</h3>
<hr>
<br />

<h4>数据筛选</h4>
<br />
<hr>
 <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">客户编号:</label>
                <div class="layui-input-block">
                    <input type="text" id="clientNos" name="clientNo"  placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">客户名称:</label>
                <div class="layui-input-block">
                    <input type="text" id="clientName" name="clientName"  placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">电话:</label>
                <div class="layui-input-block">
                    <input type="text" id="clientPhone" name="clientPhone"  placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-btn-container">
                    <button type="button" class="layui-btn layui-bg-blue" lay-submit lay-filter="searchBtn">
                    <i class="layui-icon layui-icon-search" onclick="Show()"></i>查询
                    </button>
                    <button type="button" class="layui-btn layui-bg-gray">
                        <i class="layui-icon layui-icon-refresh"></i>重置
                    </button>
                </div>
            </div>
        </div>
    </form>
<hr>
<br />

@* <div style="float:right">
        <div class="layui-btn-container">
            <button type="button" class="layui-btn layui-bg-gray" lay-on="test-page-custom">
                <i class="layui-icon layui-icon-add-1"></i>新增
            </button>
            <button type="button" class="layui-btn layui-bg-gray">
                <i class="layui-icon layui-icon-edit"></i>编辑
            </button>
            <button type="button" id="batchDeleteButton" class="layui-btn layui-bg-gray">
            <i class="layui-icon layui-icon-delete"></i>删除
            </button>
            <button type="button" class="layui-btn layui-bg-gray">
                <i class="layui-icon layui-icon-refresh"></i>刷新
            </button>
        </div>
    </div> *@

<div style="float:right">
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-bg-blue" lay-on="test-page-custom">
            <i class="layui-icon layui-icon-add-1"></i>新增
        </button>
        <button type="button" class="layui-btn layui-bg-blue" id="batchUpdBtn">
            <i class="layui-icon layui-icon-edit" id="editData"></i>编辑
        </button>
        <button type="button" class="layui-btn layui-bg-blue" id="batchDeleteBtn">
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
        <button type="button" class="layui-btn layui-bg-blue" onclick="location.href='/Purchase/ClientShow'">
            <i class="layui-icon layui-icon-refresh"></i>刷新
        </button>
    </div>
</div>

    <div>
    <table id="Clienttable" lay-data="{page: true}" ></table>
    </div>

    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-bg-red layui-btn-sm" ><i class="layui-icon layui-icon-delete"></i>删除</a>
    </script>

@* <table class="layui-table">
    <tr>
        <td><input type="checkbox" id="top" onclick="allSelect()" />全选/反选</td>
        <td>客户编号</td>
        <td>客户名称</td>
        <td>地址</td>
        <td>电话</td>
        <td>传真</td>
        <td>Email</td>
        <td>联系人</td>
        <td>备注</td>
        <td>操作</td>
    </tr>
    <tbody id="tb"></tbody>
</table> *@
<div id="demo-laypage-all"></div>

<script>
    var pageIndex=1;
    var pageSize=100;
    var toCount=0;
    $(function(){
        //Page()
        Show()
    })
        function Show() {
    layui.use('table', function () {
        var table = layui.table;
        var laypage = layui.laypage;

        //查询
        var clientNo = $("#clientNos").val();
        var clientName = $("#clientName").val();
        var clientPhone = $("#clientPhone").val();
        $.ajax({
                url: "/Purchase/GetClientShow",
                // url: 'http://10.223.8.18:8000/purchaseRead/api/Client/ShowClient',

            type: "get",
            data: {
                clientNo: clientNo,
                clientName: clientName,
                clientPhone:clientPhone,
                pageIndex: 1,
                pageSize: 100,
                token: localStorage.getItem("token"),
            },
            success: function (res) {
                
                  var res = JSON.parse(res);
                  console.log(res);
                 console.log(res.data);
                console.log(res.data.toCount);
                    toCount = res.data.toCount
                console.log(res);
                if (res.code == 0) {
                    console.log(res.data.list)
                    table.render({
                        elem: Clienttable,//对应HTML中表格的id
                        data: res.data.list,//绑定获取的数据
                        cols: [[
                            { type: 'checkbox', fixed: 'left' },
                            { field: 'clientNo', title: '客户编号', width: 100 },
                            { field: 'clientName', title: '客户名称', width: 130 },
                            { field: 'contactAddress', title: '地址', width: 110 },
                            { field: 'clientPhone', title: '电话', width: 110 },
                            { field: 'clientFax', title: '传真', width: 110 },
                            { field: 'clientEmail', title: 'Email', width: 110 },
                            { field: 'contactName', title: '联系人', width: 110 },
                            { field: 'contactAddress', title: '地址', width: 110 },
                            {
                                field: '', title: '操作', templet: function (d) {
                                        return '<a class="layui-btn layui-btn-edit layui-btn-xs" lay-on="test-page-edit" onclick="updateData(' + d.clientId + ')"><i class="layui-icon layui-icon-edit"></i>编辑</a> ' +
                                            '<a class="layui-btn layui-btn-danger layui-btn-xs" onclick="Delste(' + d.clientContactId + ')"><i class="layui-icon layui-icon-delete"></i>删除</a>';
                                }
                            }
                        ]],
                        page: true, // 是否显示分页
                        count: toCount,
                        limits: [3, 6, 8],
                        limit: 3,// 每页默认显示的数量
                        curr: pageIndex,
                    });

                } else {
                    console.log(res.msg);
                }
                    console.log(res.data)
                
                    

            },
            error: function () {
                console.log("获取数据失败");
                // 可以考虑显示一个错误消息给用户
            }
        });
    });
}
    layui.use(function () {
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;
        // 事件
        util.on('lay-on', {
            'test-page-custom': function () {
                layer.open({
                    type: 1,
                    area: '800px',
                    resize: false,
                    shadeClose: true,
                    title: '新增客户',
                    content: `<form class="layui-form layui-form-pane" action="" style="text-align: center;width:100%">
                    <div class="layui-form-item">
                        <label class="layui-form-label">客户编号：</label>
                        <div class="layui-input-inline">
                                   <input type="text" id="clientNo" name="clientNo" placeholder="可不填写,自动生成" autocomplete="off" class="layui-input"/>
                        </div>
                        <label class="layui-form-label">客户名称：</label>
                        <div class="layui-input-inline">
                                    <input type="text" id="clientName" name="clientName" autocomplete="off" class="layui-input"/>
                        </div>
                        <label class="layui-form-label">传真：</label>
                        <div class="layui-input-inline">
                                    <input type="text" id="clientFax" name="clientFax" autocomplete="off" class="layui-input"/>
                        </div>
                        <label class="layui-form-label">电话：</label>
                        <div class="layui-input-inline">
                                     <input type="text" id="clientPhone" name="clientPhone" autocomplete="off" class="layui-input"/>
                        </div>
                        <label class="layui-form-label">邮箱：</label>
                        <div class="layui-input-inline">
                                      <input type="text" id="clientEmail" name="clientEmail" autocomplete="off" class="layui-input"/>
                         </div>
                         <label class="layui-form-label">备注：</label>
                         <div class="layui-input-inline">
                             <input type="text" id="clientRemark" name="clientRemark" autocomplete="off" class="layui-input"/>
                         </div>
                            <label class="layui-form-label">联系人：</label>
                            <div class="layui-input-inline">
                            <input type="text" id="clientRemark" name="clientRemark" autocomplete="off" class="layui-input"/>
                         </div>
                             <label class="layui-form-label">地址：</label>
                             <div class="layui-input-inline">
                              <input type="text" id="clientRemark" name="clientRemark" autocomplete="off" class="layui-input"/>
                             </div>
                             <label class="layui-form-label">电话：</label>
                             <div class="layui-input-inline">
                               <input type="text" id="clientRemark" name="clientRemark" autocomplete="off" class="layui-input"/>
                             </div>
                     </div>
                     <div class="layui-form-item">
                        <button class="layui-btn" lay-submit lay-filter="demo-login">提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                    </div>
                </form>`,
                    area: ['700px', '350px'],
                    success: function () {
                        // 对弹层中的表单进行初始化渲染
                        form.render();
                        // 表单提交事件
                        form.on('submit(demo-login)', function (data) {
                            var field = data.field; // 获取表单字段值
                            // 显示填写结果，仅作演示用

                            // 此处可执行 Ajax 等操作
                            // …
                            $.ajax({
                                url: 'http://10.223.8.18:8000/purchase/api/Client/Add',
                                type: 'post',
                                contentType: 'application/json',
                                data: JSON.stringify(field),
                                success: function (res) {
                                    console.log(field)
                                    console.log(res)
                                    if (res.code == 1) {
                                        layer.alert("添加成功");
                                        location.href = "/Purchase/ClientShow"
                                    }
                                    else {
                                        layer.alert("添加失败");
                                    }
                                }
                            })
                            return false; // 阻止默认 form 跳转
                        });
                    }
                });
                var n = new Date();
                var ss = n.getFullYear() + (n.getMonth() + 1).toString().padStart(2, '0') +
                    n.getDate().toString().padStart(2, '0') +
                    n.getHours().toString().padStart(2, '0') +
                    n.getMinutes().toString().padStart(2, '0') +
                    n.getSeconds().toString().padStart(2, '0');
                $("#clientNo").val(ss);
            }
        })


        // window.updateData = function (clientId) {
        //     // 先根据id获取要编辑的数据，发起Ajax请求
        //     $.ajax({
        //         type: "get",
        //         url: "/Purchase/GetFindKe",  // 替换为实际的后台根据id获取数据的接口地址
        //         data: { clientId: clientId, token: localStorage.getItem("token") },
        //         //contentType: 'application/json',//浏览器里报415错
        //         success: function (res) {
        //             console.log(res);
        //             var res = JSON.parse(res)
        //             console.log(res)
        //             $(res.data).each(function () {
        //                 $('#clientId').val(this.clientId)
        //                 $('#clientNo').val(this.clientNo)
        //                 $('#clientName').val(this.clientName)
        //                 $('#clientFax').val(this.clientFax)
        //                 $('#clientPhone').val(this.clientPhone)
        //                 $('#clientEmail').val(this.clientEmail)
        //                 $('#clientRemark').val(this.clientRemark)
        //                 $('#contactId').val(this.contactId)
        //                 $('#contactName').val(this.contactName)
        //                 $('#contactAddress').val(this.contactAddress)
        //                 $('#office_id').val(this.office_id)
        //                 $('#user_id').val(this.user_id)
        //                 $('#createName').val(this.createName)
        //                 $('#createTime').val(this.createTime)
        //                 $('#updateName').val(this.updateName)
        //                 $('#updateTime').val(this.updateTime)

        //                 obj.clientId = this.clientId
        //                 obj.clientNo = this.clientNo
        //                 obj.clientName = this.clientName
        //                 obj.clientFax = this.clientFax
        //                 obj.clientPhone = this.clientPhone
        //                 obj.clientEmail = this.clientEmail
        //                 obj.clientRemark = this.clientRemark
        //                 obj.contactId = this.contactId
        //                 obj.contactName = this.contactName
        //                 obj.contactAddress = this.contactAddress
        //                 obj.office_id = this.office_id
        //                 obj.user_id = this.user_id
        //                 obj.createName = this.createName
        //                 obj.createTime = this.createTime

        //             })
        //         },
        //     });

        //     layer.open({
        //         type: 1,
        //         title: '编辑承运商',
        //         content: `
        //                       <form class="layui-form layui-form-pane" action="" style="text-align: center;width:100%">

        //                       <div class="layui-form-item">
        //                           <label class="layui-form-label">客户编号：</label>
        //                           <div class="layui-input-inline">
        //                              <input type="text" id="clientNo" name="clientNo" placeholder="可不填写,自动生成" autocomplete="off" class="layui-input"/>
        //                           </div>
        //                               <label class="layui-form-label">客户名称：</label>
        //                               <div class="layui-input-inline">
        //                                 <input type="text" id="clientName" name="clientName" autocomplete="off" class="layui-input"/>
        //                               </div>
        //                               <label class="layui-form-label">地址：</label>
        //                               <div class="layui-input-inline">
        //                                 <input type="text" id="unitName" name="unitName" autocomplete="off" class="layui-input"/>
        //                               </div>
        //                               <label class="layui-form-label">电话：</label>
        //                               <div class="layui-input-inline">
        //                                 <input type="text" id="clientPhone" name="clientPhone" autocomplete="off" class="layui-input"/>
        //                               </div>
        //                               <label class="layui-form-label">传真：</label>
        //                               <div class="layui-input-inline">
        //                                 <input type="text" id="clientFax" name="clientFax" autocomplete="off" class="layui-input"/>
        //                               </div>
        //                               <label class="layui-form-label">Email：</label>
        //                               <div class="layui-input-inline">
        //                                 <input type="text" id="clientEmail" name="clientEmail" autocomplete="off" class="layui-input"/>
        //                               </div>
        //                        </div>
        //                            <input type="hidden" id="h2" name="Did" />
        //                        <div class="layui-form-item">
        //                           <button class="layui-btn" lay-submit lay-filter="demo-login">提交</button>
        //                           <button type="reset" class="layui-btn layui-btn-primary">取消</button>
        //                       </div>
        //                   </form>
        //                 `,
        //         area: ['700px', '400px'],
        //         success: function () {
        //             var obj1 = {
                       
        //                 clientNo = '',
        //                 clientName = "",
        //                 clientFax = "",
        //                 clientPhone = "",
        //                 clientEmail = "",
        //                 clientRemark = "",
        //                 contactId= "",
        //                  contactName= "",
        //                 contactAddress= ""，
        //                 office_id = "",
        //                 user_id = "",
        //                 createName = "",
        //                 createTime = ""
        //             };
        //             // 对弹层中的表单进行初始化渲染
        //             form.render();
        //             // 表单提交事件
        //             form.on('submit(demo-login)', function (data) {
        //                 var field = data.field;
        //                 obj1.clientId = obj.clientId
        //                 obj1.clientNo = obj.clientNo
        //                 obj1.clientName = obj.clientName
        //                 obj1.clientFax = obj.clientFax
        //                 obj1.clientPhone = obj.clientPhone
        //                 obj1.clientEmail = obj.clientEmail
        //                 obj1.clientRemark = obj.clientRemark
        //                 obj1.contactId = obj.contactId
        //                 obj1.contactName = obj.contactName
        //                 obj1.contactAddress = obj.contactAddress
        //                 obj1.office_id = obj.office_id
        //                 obj1.user_id = obj.user_id
        //                 obj1.createName = obj.createName
        //                 obj1.createTime = obj.createTime
        //                 $.ajax({
        //                     url: '/Purchase/GetUpdateUnit',
        //                     type: 'post',
        //                    // contentType: 'application/json',
        //                     data: { obj1, token: localStorage.getItem("token") },
        //                     success: function (res) {
        //                         var list = JSON.parse(res)
        //                         console.log(field)
        //                         console.log(res)
        //                         if (list.data == 1) {
        //                             layer.alert("修改成功");
        //                             setTimeout(function () {
        //                                 location.reload();
        //                             }, 2000);
        //                         }
        //                         else {
        //                             layer.alert("修改失败");
        //                         }
        //                     }
        //                 })
        //                 return false; // 阻止默认 form 跳转
        //             });
        //         }
        //     });
        // };
    });

    //全选全不选
    function allSelect() {
        $(".ck").prop("checked", $("#top").prop("checked"));
    }
    //反选
    function isAll() {
        if ($(".ck").length == $(".ck:checked").length) {
            $("#top").prop("checked", true);
        }
        else {
            $("#top").prop("checked", false);
        }
    }
    // //删除
    function Delste(clientContactId){
        var obj = {
            "clientContactId":clientContactId
        }
        // console.log(obj)
        if(confirm("确定删除吗?"))
        {
            $.ajax({
                type: "post",
                url: "../Purchase/GetDeleteClient",
                //contentType: "application/json",
                data: { data: JSON.stringify(obj)},
                success:function(res){
                    var res = JSON.parse(res)
                    if (res.code == 1) {
                        layer.alert("删除成功");
                        Show();
                        return;
                    }
                    else{
                        layer.alert("删除失败");
                    }
                }
            })
        }
    }

//     //批量删除
// $('#batchDeleteButton').click(function(){
//     var table = layui.table;
//     // 获取选中行的数据（这里主要是获取warehouseId）
//     var checkStatus = table.checkStatus('UnitTable');
//     var selectedData = checkStatus.data.map(function (item) {
//         return item.unitId;
//     });

//     if (selectedData.length === 0) {
//         layer.msg("请至少选择一条要删除的数据", { icon: 2 });
//         return;
//     }
//     console.log(selectedData);
//     layer.confirm('确定要批量删除选中的' + selectedData.length + '条数据吗？',function (index) {
//         // 发送批量删除请求到后端
//         $.ajax({
//             url: "http://10.223.8.22:8000/purchase/api/Unit/Handle", // 后端处理批量删除的接口地址，需根据实际情况调整
//             type: "post",
//             contentType: "application/json",
//             data: JSON.stringify({ unitId: selectedData }),
//             success: function (res) {
//                 console.log(res.data);
//                 if (res.data >0) {
//                     layer.msg("批量删除成功", { icon :1})
//                     // 重新加载表格数据，展示更新后的列表
//                     Show();
//                 } else {
//                     layer.msg("批量删除失败:" + res.message, { icon: 2 });
//                 }
//             },
//             error: function () {
//                 console.log("批量删除数据失败");
//                 // 可以考虑显示一个错误消息给用户
//             }
//         });
//     })
// })
</script>


   